<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="曲线" name="first" >
        <line-chart2 :chart-data="lineChartData" width="1000px"/>
      </el-tab-pane>
      <el-tab-pane label="运行记录" name="second">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
          <el-form-item label="日期" style="width: 800px;float: right">
            <el-col :span="6">
              <el-date-picker type="date" placeholder="开始日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center">-</el-col>
            <el-col :span="6">
              <el-date-picker type="date" placeholder="结束日期" v-model="sizeForm.date2" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center">&nbsp</el-col>
            <el-col :span="10">
              <el-button type="primary">增加膜池</el-button>
              <el-button type="primary">查询</el-button>
            </el-col>
          </el-form-item>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="时间">
            </el-table-column>
            <el-table-column
              prop="waterFlow"
              label="产水流量">
            </el-table-column>
            <el-table-column
              prop="waterHeat"
              label="产水压力">
            </el-table-column>
            <el-table-column
              prop="gasFlow"
              label="洗气量">
            </el-table-column>
            <el-table-column
              prop="gasDiff"
              label="汽能难度">
            </el-table-column>
            <el-table-column
              prop="waterOut"
              label="渗水量">
            </el-table-column>
            <el-table-column
              prop="waterGas"
              label="气水比">
            </el-table-column>
            <el-table-column
              prop="waterTemp"
              label="水温">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                >修改</el-button>
                <el-button
                  v-if="scope.row.parentId != 0"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                >删除</el-button>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="tableData.length">
          </el-pagination>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LineChart2 from '../../dashboard/LineChart2';
const tempData = {
  yData: {
    waterFlow: [100, 120, 161, 134, 105, 160, 165],
    waterHeat: [120, 82, 91, 154, 162, 140, 145],
    gasFlow: [80, 65, 70, 50, 43, 60, 79],
    gasDiff: [11, 20, 25, 40, 60, 40, 88],
    waterOut: [120, 110, 115, 116, 126, 133, 114],
    waterGas: [115, 82, 91, 125, 140, 70, 60],
    waterTemp: [15, 82, 91, 154, 80, 64, 80],
  },
}
const lineChartData = {
  yData: tempData.yData,
  xData:['12:00', '13:00', '14:00', '15:00', '18:00', '19:00', '20:00'],
  legend:{  data: ['产水流量', '产水压力','洗气量','汽能难度','渗水量','气水比','水温']},
  series:[
    {
      name: '产水流量', itemStyle: {
        normal: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        }
      },
      smooth: true,
      type: 'line',
      data: tempData.yData.waterFlow,
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '产水压力',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3888fa',
          lineStyle: {
            color: '#3888fa',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.waterHeat,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '洗气量',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#7238fa',
          lineStyle: {
            color: '#7238fa',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.gasFlow,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '汽能难度',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#38fadd',
          lineStyle: {
            color: '#38fadd',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.gasDiff,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '渗水量',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#cdd4ab',
          lineStyle: {
            color: '#cdd4ab',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.waterOut,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '气水比',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#de4b06',
          lineStyle: {
            color: '#de4b06',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.waterGas,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '水温',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3da0c7',
          lineStyle: {
            color: '#3da0c7',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: tempData.yData.waterTemp,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }


  ],
}
export default {
  name: "Cisterns",
  dicts: ['sys_show_hide', 'sys_normal_disable'],
  components:{
    LineChart2
  },
  data() {
      return {
        lineChartData: lineChartData,
        activeName:"second",
        sizeForm:{
          date1:'',
          date2:''
        },
        currentPage:null,
        tableData: [{
          date: '2016-05-02',
          waterFlow: '10L/min',
          waterHeat: '10Mpa',
          gasFlow:'100',
          gasDiff:'20',
          waterOut:'15',
          waterGas:'2',
          waterTemp:'35.5'
        },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },{
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },{
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          },
          {
            date: '2016-05-02',
            waterFlow: '10L/min',
            waterHeat: '10Mpa',
            gasFlow:'100',
            gasDiff:'20',
            waterOut:'15',
            waterGas:'2',
            waterTemp:'35.5'
          }]

    }
  },
  created() {
     this.activeName = "second";
  },
  methods:{

  }
};
</script>
